<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="优惠券编号/名称">
        <br />
        <br />
        <el-input
          v-model="formInline.couponName"
          placeholder="优惠券编号/名称"
          style="margin-left:-100px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="优惠券状态">
        <br />
        <br />
        <el-radio-group v-model="formInline.status" style="margin-left:-80px;">
          <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="1">启用</el-radio-button>
          <el-radio-button label="0">停用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="margin-left:700px;text-align:right">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
          size="mini"
          >查询</el-button
        >
        <!-- </el-form-item>
            <el-form-item> -->
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <!-- </el-form-item>
            <el-form-item> -->
        <el-button
          type="primary"
          @click="toAdd()"
          icon="el-icon-edit"
          size="mini"
          >创建优惠券</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      height="400px"
      style="width: 100%;height:500px"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="couponSeq"
        label="优惠券编号"
        header-align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="couponName"
        label="优惠券名称"
        header-align="center"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="couponMoney"
        label="优惠券面值"
        header-align="center"
        width="160"
      >
        <template slot-scope="scope">
          <span
            >满{{ scope.row.conponLimitMoney }}减{{
              scope.row.couponMoney
            }}元</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="useScope"
        label="适用商品"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.useScope == 0">全部商品</span>
          <span v-if="scope.row.useScope == 1">
            <el-link @click="getDetail(scope.row.uuid, 1)" :underline="false"
              >指定商品</el-link
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="isStore"
        label="适用门店"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.isStore == 0">全部门店</span>
          <span v-if="scope.row.isStore == 1">
            <el-link @click="getDetail(scope.row.uuid, 2)" :underline="false"
              >指定门店</el-link
            >
          </span>
        </template>
      </el-table-column>
      <!--
      <el-table-column prop="couponType" label="促销方式" header-align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.couponType == '1'">现金</span>
          <span v-if="scope.row.couponType == '2'">满减</span>
          <span v-if="scope.row.couponType == '3'">满折</span>
        </template>
      </el-table-column>
            -->
      <el-table-column
        prop="beginTime"
        label="开始时间"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">{{ scope.row.beginDate }}</template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="截止时间"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">{{ scope.row.endDate }}</template>
      </el-table-column>
      <el-table-column label="优惠券状态" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '1'">启用</span>
          <span v-if="scope.row.status == '0'">停用</span>
          <span v-if="scope.row.status == '2'">已删除</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="comments"
        label="使用说明"
        header-align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        label="操作"
        width="180"
        align="center"
        header-align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toEdit(scope.row, true)"
            >详情</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.status == 1"
            @click="updateStatus(scope.row.uuid, 0)"
            >停用</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.status == 0"
            @click="updateStatus(scope.row.uuid, 1)"
            >启用</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.status == 0 && scope.row.used == 0"
            @click="toEdit(scope.row, false)"
            >编辑</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.status == 0 && scope.row.used == 0"
            @click="updateStatus(scope.row.uuid, 2)"
            >删除</el-button
          >
          <!--
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0 && scope.row.used == 0"
                        @click="showWarzone(scope.row.uuid)"
                    >大区移除</el-button>
            -->
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="适用商品" :visible.sync="dialogVisibleGood" width="55%">
      <el-table
        :data="goodsList"
        border
        style="font-size: 10px;width:100%;"
        height="300"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          width="200"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="barCode"
          label="商品编码"
          width="180"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="goodsTypeName"
          label="商品分类"
          width="180"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="salePrice"
          label="商品价格"
          header-align="center"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="unitName"
          label="销售单位"
          header-align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleGood = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="适用门店" :visible.sync="dialogVisibleShop" width="55%">
      <el-table
        :data="shopList"
        border
        style="font-size: 10px;width:100%;margin-top:-20px;"
        height="260"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="storeName"
          label="店铺名称"
          width="180"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="storeOwnerName"
          label="店主姓名"
          width="100"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="storeType"
          label="店铺类型"
          width="100"
          header-align="center"
        >
          <template slot-scope="scope">
            <template v-for="item in storeType">
              <span v-if="scope.row.storeType == item.value" :key="item.value">{{ item.label }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="storeAddressDetail"
          label="店铺地址"
          header-align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleShop = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="大区移除"
      :visible.sync="dialogVisibleWarzone"
      width="35%"
    >
      <el-table
        :data="warzoneList"
        border
        @selection-change="warzoneChecked"
        style="font-size: 10px;width:100%;margin-top:-20px;"
        height="260"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orgName"
          label="大区"
          header-align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWarzone = false">取 消</el-button>
        <el-button type="primary" @click="warzoneRemove()">移 除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryCouponList,
  updateCouponStatus,
  queryCouponById,
  getWarzoneList,
  deleteZq,
} from '@/api/promotionProgramEdit';
import { dict } from '../../dict';

export default {
  data() {
    return {
      loading: true,
      formInline: {
        couponName: '',
        status: '',
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      curUuid: '',
      tableData: [],
      goodsList: [],
      shopList: [],
      warzoneList: [],
      lsWarzoneList: [],
      dialogVisibleGood: false,
      dialogVisibleShop: false,
      dialogVisibleWarzone: false,
    };
  },
  mounted() {
    this.couponList();
    this.getWarzoneList();
  },
  methods: {
    kong() {
      this.formInline.couponName = '';
      this.formInline.status = '';
    },
    getDetail(uuid, flag) {
      queryCouponById(uuid).then((res) => {
        if (
          res.result.memberGoodsInfoDTOS != null &&
          res.result.memberGoodsInfoDTOS.length > 0
        ) {
          this.goodsList = res.result.memberGoodsInfoDTOS;
        }
        if (
          res.result.userStoreInfoDTOS != null &&
          res.result.userStoreInfoDTOS.length > 0
        ) {
          this.shopList = res.result.userStoreInfoDTOS;
        }
      });
      if (flag == 1) {
        this.dialogVisibleGood = !this.dialogVisibleGood;
      }
      if (flag == 2) {
        this.dialogVisibleShop = !this.dialogVisibleShop;
      }
    },
    getBgClass(pic) {
      if (pic == '1') {
        return ' partDiv partDivBg1 partDiv-One ';
      } else if (pic == '2') {
        return ' partDiv partDivBg2 partDiv-One ';
      } else {
        return ' partDiv partDivBg3 partDiv-One ';
      }
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.couponList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.couponList();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    search() {
      this.listQuery.current = 1;
      this.couponList();
    },
    couponList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponType: 3,
          couponName: this.formInline.couponName,
          status: this.formInline.status,
        },
        ascs: [],
        descs: [],
      };
      queryCouponList(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    updateStatus(uuid, status) {
      let data = {
        uuid: uuid,
        status: status,
      };
      var msg = '';
      if (status == '1') {
        msg = '启用';
      } else if (status == '0') {
        msg = '停用';
      } else if (status == '2') {
        msg = '删除';
      }
      this.$confirm('确定' + msg + '当前优惠券吗？', '提示', {
        confirmButtonText: msg,
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          updateCouponStatus(data).then((res) => {
            if (res.code == '1') {
              this.$message({
                showClose: true,
                message: msg + '成功',
                type: 'success',
              });
              this.couponList();
            } else {
              this.$message.error(msg + '失败');
            }
          });
        })
        .catch(() => {});
    },
    toAdd() {
      this.$router.push({
        name: 'couponEdit_gj',
        params: {},
      });
    },
    toEdit(item, flag) {
      this.$router.push({
        name: 'couponEdit_gj',
        params: {
          edit: item,
          disabledFlag: flag,
        },
      });
    },
    getWarzoneList() {
      let data = {};
      getWarzoneList(data).then((res) => {
        this.warzoneList = res.records;
      });
    },
    showWarzone(uuid) {
      this.dialogVisibleWarzone = !this.dialogVisibleWarzone;
      this.curUuid = uuid;
    },
    warzoneChecked(row) {
      this.lsWarzoneList = row;
    },
    warzoneRemove() {
      if (this.lsWarzoneList == null || this.lsWarzoneList.length == 0) {
        return;
      }
      var zqOrgSeq = '';
      for (var i in this.lsWarzoneList) {
        if (i == 0) {
          zqOrgSeq += this.lsWarzoneList[i].orgSeq;
        } else {
          zqOrgSeq += ',' + this.lsWarzoneList[i].orgSeq;
        }
      }
      var data = {
        couponId: this.curUuid,
        zqOrgSeq: zqOrgSeq,
      };
      this.$confirm('确定移除所选大区下的所有门店吗？', '提示', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteZq(data).then((res) => {
            if (res.code == '1') {
              this.$message({
                showClose: true,
                message: '移除成功',
                type: 'success',
              });
              this.dialogVisibleWarzone = !this.dialogVisibleWarzone;
            } else {
              this.$message.error('移除失败:' + res.message);
            }
          });
        })
        .catch(() => {});
    },
  },
  computed: {
    storeType: () => dict.storeType
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.demo-form-inline {
  // border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}

.partUl {
  overflow: hidden;
  width: 100%;
  margin-left: 0px;
  margin-top: 20px;
}
.emptyLi {
  text-align: center;
  padding-top: 100px;
  font-size: 14px;
  color: #d6d6d6;
}
.partLi {
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}
.partDiv {
  border: 1px solid #ffcc00;
  border-radius: 10px;
  width: 250px;
  text-align: center;
}
.partDivBg1 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg1.png');
}
.partDivBg2 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg2.png');
}
.partDivBg3 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg3.png');
}
.partDiv0 {
  margin-top: 5px;
  text-align: right;
  float: right;
  padding-right: 5px;
  padding-top: 2px;
  background-color: transparent;
}
.partDiv1 {
  color: #fff;
  line-height: 20px;
  padding: 15px;
  padding-left: 10px;
  padding-top: 45px;
}
.partDivNum {
  color: #fff;
  line-height: 30px;
  padding: 0px;
  padding-right: 10px;
  text-align: right;
  background-color: #f27e7a;
}
.partDiv2 {
  background-color: #f9faf9;
  line-height: 30px;
  padding: 20px;
  font-size: 12px;
}
.partButton {
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: transparent;
}
.partDivF {
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 0px 0px 5px 0px;
}
.partDivC {
  float: left;
  width: 10px;
  height: 5px;
  border-radius: 0px 0px 5px 5px;
}
.partDivE {
  float: right;
  width: 5px;
  height: 5px;
  border-radius: 0px 0px 0px 5px;
}
.triangle {
  overflow: hidden;
  position: static;
}
.triangle-back {
  position: absolute;
  border-top: 60px solid #f44336;
  border-right: 60px solid #f27e7a;
}
.triangle-text {
  overflow: hidden;
  width: 40px;
  font-size: 12px;
  color: #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  padding-top: 14px;
  margin-left: -5px;
}
.partDiv-One > .partDiv1 {
  background-color: #f27e7a;
}
.partDiv-One > .partDivSmall > .partDivF,
.partDiv-One > .partDivSmall > .partDivC,
.partDiv-One > .partDivSmall > .partDivE {
  background-color: #f27e7a;
}
.partDiv-One > .partDiv2 {
  background-color: #f9faf9;
  color: #f27e7a;
}
.partDiv-One .partButton {
  border: 2px solid #f27e7a;
  color: #f27e7a;
}
.partDiv-Two > .partDiv1,
.partDiv-Two > .partDivSmall > .partDivF,
.partDiv-Two > .partDivSmall > .partDivC,
.partDiv-Two > .partDivSmall > .partDivE {
  background-color: #74d3d3;
}
.partDiv-Two > .partDiv2 {
  background-color: #f9faf9;
  color: #74d3d3;
}
.partDiv-Two .partButton {
  border: 2px solid #74d3d3;
  color: #74d3d3;
}
.partDiv-Three > .partDiv1,
.partDiv-Three > .partDivSmall > .partDivF,
.partDiv-Three > .partDivSmall > .partDivC,
.partDiv-Three > .partDivSmall > .partDivE {
  background-color: #85c1e9;
}
.partDiv-Three > .partDiv2 {
  background-color: #f9faf9;
  color: #85c1e9;
}
.partDiv-Three .partButton {
  border: 2px solid #85c1e9;
  color: #85c1e9;
}
.partDiv-One > .triangle > .triangle-back {
  border-right: 60px solid #f27e7a;
}
.partDiv-Two > .triagnle > .triangle-back {
  border-right: 60px solid #74d3d3;
}
.partDiv-Three > .triagnle > .triangle-back {
  border-right: 60px solid #85c1e9;
}
</style>
